<template>  
    <div>  
      <h2>购物车</h2>  
      <div v-if="cartItems.length === 0">  
        <p>您的购物车为空</p>  
      </div>  
      <div v-else>  
        <div v-for="item in cartItems" :key="item.id" class="cart-item">  
          <h3>{{ item.name }}</h3>  
          <p>数量: {{ item.quantity }}</p>  
          <p>价格: {{ (item.price * item.quantity).toFixed(2) }}元</p>  
          <button @click="removeFromCart(item.id)">移除购物车</button>  
        </div>  
        <p>Total: {{ total.toFixed(2) }}元</p>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    computed: {  
      cartItems() {  
        return this.$store.state.cartItems;  
      },  
      total() {  
        return this.$store.getters.cartTotal;  
      },  
    },  
    methods: {  
      removeFromCart(itemId) {  
        this.$store.commit('removeFromCart', itemId);  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  /* 样式 */  
  .cart-item {  
    margin-bottom: 10px;  
  }  
  </style>